Copyright: Copyright ©1995 - 1999 S.A.D.E. s.a.r.l.
Citation: Copyright ©1995 - 1999 S.A.D.E. s.a.r.l. / All rights are reserved.


Dialog Designer

The Dialog Editor lets you design dialogs visually, instead of by writing a command.

You can access the Dialog Editor in two ways:

from the code window using the context menu or the F2 keyboard shortcut.  To edit an existing dialog description, place the cursor on the first line of the DIALOG CREATE command before right clicking the mouse or pressing F2. To create a dialog description where none existed before, place the cursor where you want the dialog description to go and press F2.

from the Tools menu, you can choose Application Wizard. The Wizard will let you run the Dialog Designer to design a new dialog from scratch, and then generate all the DialogScript code for a working (though non-functional) application.

See also:

Using the Dialog Designer


Using the Dialog Designer

The Dialog Designer lets you design and edit dialogs interactively, so you can see the result of your changes straight away.

The Dialog Designer is a dialog which lets you create and edit dialog elements by entering values into fields.  Fields inapplicable to a particular dialog element are disabled, so it is difficult to enter invalid information.

Click on an image in the docked palette to find information about certain dialog elements.

The drop down list is used to select dialog elements which are already in the dialog. To add an element just click on the required one on the docked palette of the Dialog Designer.

You can also change the size of the dialog being designed by dragging the edges using the mouse.

The dialog elements are listed next.  To edit a particular dialog element you can:

select it into the drop down list with the mouse;

click on the corresponding control on the dialog itself.

You can add a new dialog element by a click on the required one on the docked palette of the Dialog Designer.

You can delete a dialog element by pressing Del.

You can change the position of a dialog element by pressing either Arrow UP DOWN LEFT RIGHT or simply by dragging it with the mouse.  The order that they are defined is important.  To edit the dialog description into Dialog Designer, right click on the created dialog and select "Edit dialog description".

You can also refresh the dialog from the context menu. It is sometimes necessary to refresh the dialog because some changes, for example changes to styles, are not immediately reflected by the dialog itself.


Editing Dialog Elements

You can change the size and position of a dialog control by dragging it on the dialog itself.  To change the other attributes you must edit the dialog element which is displayed on the Dialog Designer main window.

The type and name of the control are shown in the first two fields.  They cannot be changed.  To rename a control you must delete it and then recreate it.

The remaining fields are editable.  Not all fields are applicable to every control type.  Those which are not are disabled.  When you press the Help button you will call up a page of help describing the type of control currently being edited and the fields that are applicable.  After you have changed a field, press Tab and the change will be reflected in the dialog.

Note that default values are used where an applicable field is left blank.  Typically, the height of a control is left blank, as controls are normally created at the appropriate height for the default size of text.

The Caption field is used for text that describes the control, such as the name of a button.

The Filename field is used to specify the name of a file, such as a bitmap file for a BITMAP control, or an icon for a TASKICON dialog element.  The name can be entered manually, or selected from a standard Windows File Open dialog which is called up by pressing the button captioned ...

The Values field is used to define multiple values for a control, such as a group of radio buttons or the items on a popup menu.  Note that values are separated from one another by vertical bar characters.

The Value field is used to set an initial value for a control which will be displayed when the dialog first appears.

In the Styles field you can select the valid styles from the drop down list.  If more than one style is chosen, a semicolon must separate each one.  Valid styles include those you have defined, plus special styles that apply only to a particular control, such as the PASSWORD style for an EDIT control.


Adding Dialog Elements
@Adding Dialog Elements

To add a control or define a new style for the dialog select the dialog element button on the docking palette.  A dialog asking for a name for the element will appear:

The Dialog Editor will choose a name for the element, which you can overwrite with a name of your choice if you prefer.  The Dialog Editor will validate that the name is unique and does not contain any illegal characters when you press the OK button.

When you press OK, in the case of a control a control is added to the form with the minimum default attributes.  The new control is selected and its details displayed in the Dialog Designer ready for you to edit them, as you would an existing control.  For a style the editor shows a style with all fields left blank, ready for you to define the font and color attributes.


Dialog

The fields on the Dialog Designer main page should be filled in as follows:

Top:	This is the top position of the dialog.  You can enter the value -1 if you want the dialog to appear in the center of the screen.

Left:	This is the  left hand edge position of the dialog.

Width:	This is the  width  of the dialog.

Height:	This is the  height  of the dialog.

Title:	This is the text that will appear in the caption bar of the dialog.

Style:	These fields are for styles to apply to the dialog. (Available styles)

Tip:	The width and height can be set by dragging the edges of the dialog using the mouse.


Editing Styles

Styles are used to specify the colors or fonts to be used for a control, or for the entire dialog.  When you are defining or editing a style, the Dialog Editor looks like this:

Again, the name of a style once defined is fixed, and can only be changed by deleting the style and redefining it.

The font name, size and style (bold, italic) can be entered manually or selected from the standard Windows font selection dialog which can be called up by pressing the button captioned ...The Position field determines whether text is left or right justified, or centered in the control.

The Backgrnd and Foregrnd fields set the background and foreground colors, respectively.

Defaults are used where fields are left blank.


BITMAP dialog element

The fields for a BITMAP dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the bitmap.

Left:	This is the  left hand edge position of the bitmap.

Width:	This is the  width  of the bitmap.

Height:	This is the  height  of the bitmap.

Filename:	The BITMAP dialog element supports only BMP and ICO files. In addition, it can load a bitmap from a BMP file that has been compiled into a resource file (special VDS resource format.) In this case, the filename must be followed by a vertical bar and the offset, in bytes, of the BMP file within the resource. No spaces are permitted between the filename, the vertical bar and the offset.

Style:	These fields are for styles to apply to the bitmap.

STRETCH - Bitmap will be stretched to fit the size of the control.  (This does not apply to icons.)

CLICK - Bitmap will generate CLICK events when clicked with the mouse.

HAND - As CLICK, but a hand cursor will be shown when over the bitmap.

CROSS - As CLICK, but a cross cursor will be shown when over the bitmap.

User defined styles.

Multiple styles may be used (One per field).

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


BUTTON dialog element

The fields for a BUTTON dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.  When pressed, the button will cause a <name>BUTTON event.

Top:	This is the top position of the button.

Left:	This is the  left hand edge position of the button.

Width:	This is the  width  of the button.

Height:	This is the  height  of the button.

Caption:	Optional.  If omitted, the control name will be used.  Use a caption if you want to use characters in the caption that would not be valid in a control name.

Style(s):	User defined styles only.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


de_bitbtn
BITBTN dialog element

The fields for a BITBTN dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.  When pressed, the button will cause a <name>BUTTON event.

Top:	This is the top position of the bitbtn.

Left:	This is the  left hand edge position of the bitbtn.

Width:	This is the  width  of the bitbtn.

Height:	This is the  height  of the bitbtn.

Filename:	The filename is the name of the bitmap to be displayed in the button. It should ideally have 16 colours or fewer. The bitmap can be loaded from a resource file (special VDS resource format.) In this case, the filename must be followed by a vertical bar and the offset, in bytes, of the BMP file within the resource. No spaces are permitted between the filename, the vertical bar and the offset.

Caption:	The caption is optional, and appears below the bitmap if present. The hint is also optional, and defines the etxt that appears in a tooltip when the pointer is over the button. If no hint text is present, the button name is used instead.

Tooltip:	The hint is also optional, and defines the text that appears in a tooltip when the pointer is over the button. If no hint text is present, the button name is used instead. There are no styles for this dialog element.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


CHECK dialog element

The fields for a CHECK dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the CHECK dialog element.

Left:	This is the  left hand edge position of the CHECK dialog element.

Width:	This is the  width  of the CHECK dialog element.

Height:	This is the  height  of the CHECK dialog element.

Caption:	This is the text that appears alongside the check box.

Value:	Either blank or zero (unchecked) or 1 (checked).

Style(s):	User defined styles only.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


COMBO dialog element

The fields for a COMBO dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the COMBO.

Left:	This is the  left hand edge position of the COMBO.

Width:	This is the  width  of the COMBO.

Height:	This is the  height  of the COMBO.

Value:	Initial text to appear in the control (if any).

Style(s):	The SORTED style specifies whether the list items are to be maintained in ASCII order or not.  Data entered in the edit control is automatically inserted into the drop-down list when the focus moves away from the control.

The LIST style causes the combo box to work like a LIST dialog element, so you cannot enter data into the control, only choose values from the drop down list.

The CLICK style causes a <name>CLICK event to be generated when an item is chosen from the drop-down list.

The EXIT style causes a <name>EXIT event to be generated when the combo box loses the input focus.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


EDIT dialog element

The fields for a EDIT dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the EDIT dialog element.

Left:	This is the  left hand edge position of the EDIT dialog element.

Width:	This is the  width  of the EDIT dialog element.

Height:	This is the  height  of the EDIT dialog element.

Value:	Initial text to appear in the control (if any).

Style(s):	PASSWORD style, specific to edit controls, causes asterisks to be displayed for every character typed.

EXIT style causes a <name>EXIT event to be generated whenever the input focus leaves this window control.  One use of this would be to invoke a validation procedure.

MULTI: This makes the element into a multi-line edit control, similar to Notepad (and with similar restrictions, such as an approximately 32KB limit on the size of text.)

WRAP: This style applies if the dialog element is multi-line, and causes text to be word-wrapped within the boundaries of the element.

SCROLL: This style applies if the dialog element is multi-line, and causes scroll bars to appear so that non word-wrapped text (or longer text than can fit in the control) can be viewed and edited.

READONLY: makes the text in the control read only.

TABS: Allows tab characters to be entered when editing text. If this style is not present, hitting tab will cause focus to go to the next control, instead.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


de_Group
GROUP dialog element

The fields for a GROUP dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the GROUP dialog element.

Left:	This is the  left hand edge position of the GROUP dialog element.

Width:	This is the  width  of the GROUP dialog element.

Height:	This is the  height  of the GROUP dialog element.

Caption:	Initial text to label the control (if any).

Style(s):	User defined styles only.

See important information on the GROUP dialog element.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


LIST dialog element

The fields for a LIST dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the LIST dialog element.

Left:	This is the  left hand edge position of the LIST dialog element.

Width:	This is the  width  of the LIST dialog element.

Height:	This is the  height  of the LIST dialog element.

Style(s):	The CLICK style causes a <name>CLICK event to be generated when an item is chosen from the list.

The DBLCLICK style returns a <name>DBLCLICK event if user double-clicks an item in the list box.

The SORTED style specifies whether the list items are to be maintained in ASCII order or not.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


de_Menu
MENU dialog element

The fields for a MENU dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Items:	Successive pull-down menus.

See important information on the MENU dialog element.


PROGRESS dialog element

The fields for a PROGRESS dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the PROGRESS dialog element.

Left:	This is the  left hand edge position of the PROGRESS dialog element.

Width:	This is the  width  of the PROGRESS dialog element.

Height:	This is the  height  of the PROGRESS dialog element.

Value:	Initial value for the progress indicator (from 0 to 100).  By default, the value is zero.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


RADIO dialog element

The fields for a RADIO dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the RADIO dialog element.

Left:	This is the  left hand edge position of the RADIO dialog element.

Width:	This is the  width  of the RADIO dialog element.

Height:	This is the  height  of the RADIO dialog element.

Caption:	This is the caption text for the whole group.

Values:	A list of values for each button, separated by vertical bars.  The values will be displayed alongside each button.

Value:	One of the values from the list above.  By default, none of the buttons is selected.

Style(s):	User defined styles only.

See important information on the RADIO dialog element.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


STATUS dialog element

The fields for a STATUS dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Value:	Initial text to be displayed in the panel, if any.

Style(s):	User defined styles only.


STYLE dialog element

The fields for a STYLE dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Font:	This specifies the typeface to be associated with the style.  You can choose this and the following three attributes from a common font dialog by pressing the button captioned ....  The default font is MS Sans Serif.

Size:	Specifies the size of the typeface.  The default size is 8.

Bold:	Specifies whether the bold attribute is required.

Italic:	Specifies whether the italic attribute is required.

Justification: Specifies whether text should be left justified, centered, or right justified in a TEXT control.  This attribute does not apply to other controls.

Backgrnd:	Can be one of BACKGRND, FOREGRND or a list of colors selected from a drop-down list.  The default value, BACKGRND, is the Windows default button color.

Foregrnd:	Can be one of BACKGRND, FOREGRND or a list of colors selected from a drop-down list.  The default value, FOREGRND, is the Windows default text color.


de_Tab
TAB dialog element

The fields for a TAB dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the TAB dialog element.

Left:	This is the  left hand edge position of the TAB dialog element.

Width:	This is the  width  of the TAB dialog element.

Height:	This is the  height  of the TAB dialog element.

Values:	 The names of the tabs are defined in <styles> as a string of names separated by vertical bar characters, e.g. Tab 1|Tab 2|Tab 3.

Style(s):	User defined styles only.

See important information on the TAB dialog element.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


TEXT dialog element

The fields for a TEXT dialog element should be filled in as follows:

Name:	As specified.  This cannot be changed once the control exists, except by editing the DialogScript code.

Top:	This is the top position of the TEXT dialog element.

Left:	This is the  left hand edge position of the TEXT dialog element.

Width:	This is the  width  of the TEXT dialog element.

Height:	This is the  height  of the TEXT dialog element.

Value:	Initial value of text to be displayed in the control.

Style(s):	TRANSPARENT - Use when positioning a TEXT element over a BITMAP.

The CLICK style generates a <name>CLICK event if user clicks on the text.

User defined styles.

Tips:	The width and height can be set by dragging the edges of the element using the mouse.

The width and height can be left blank to take default values.


styles
Styles are names which are associated with a set of attributes (such as color, font) that determine how a dialog or a control should appear.  They are set using the STYLE dialog element.  In addition, there are some predefined styles such as CLICK  that apply only to dialogs or specific controls.